<template>
  <div class="login-container">
    <div class="login-weaper  animated bounceInDown">
      <div class="login-left">
        <img class="img"
             src="/img/logo.png"
             alt="">
        <p class="title">{{website.infoTitle}}</p>
      </div>
      <div class="login-border">
        <div class="login-main">
          <userLogin v-if="activeName==='user'"></userLogin>
          <codeLogin v-else-if="activeName==='code'"></codeLogin>
          <thirdLogin v-else-if="activeName==='third'"></thirdLogin>
          <!--          <register v-else-if="activeName==='register'"></register>-->
<!--          <div class="login-menu">-->
<!--            <a href="#"-->
<!--               @click.stop="activeName='user'">账号密码</a>-->
<!--            <a href="#"-->
<!--               @click.stop="activeName='code'">手机号登录</a>-->
<!--            <a href="#"-->
<!--               @click.stop="activeName='third'">第三方登录</a>-->
<!--            <a href="#"-->
<!--               @click.stop="activeName='register'">免费注册</a>-->
<!--          </div>-->
        </div>
      </div>
    </div>
    <div style="position: absolute;bottom: 10px;left: 0;right: 0;">
      <p style="text-align: center;font-size: 13px;color: black;">
        ©2022 v1.0.0&nbsp;&nbsp;<a target="_blank" href="https://beian.miit.gov.cn">苏ICP备2022031967号-1&nbsp;&nbsp;这里修车</a>
      </p>
    </div>
  </div>
</template>
<script>
  import '@/styles/login.scss'
  import userLogin from "./userlogin";
  import codeLogin from "./codelogin";
  import thirdLogin from "./thirdlogin";
  import register from "./register";
  import {mapGetters} from "vuex";
  import {getStore, setStore} from "@/util/store";
  import {dateFormat} from "@/util/date";
  import {validatenull} from "@/util/validate";
  import topColor from "@/page/index/top/top-color";

  export default {
    name: "login",
    components: {
      userLogin,
      codeLogin,
      thirdLogin,
      register,
      topColor
    },
    data() {
      return {
        time: "",
        active: "",
        activeName: this.$route.meta.activeName,
        thirdPartyForm: {}
      };
    },
    watch: {
      $route: {
        handler() {
          const params = this.$route.query
          if (validatenull(params.state) && validatenull(params.code)) return

          this.thirdPartyForm.state = params.state
          this.thirdPartyForm.code = params.code
          const loading = this.$loading({
            lock: true,
            text: `登录中,请稍后。。。`,
            spinner: 'el-icon-loading'
          })
          this.$store.dispatch('LoginByThirdParty', this.thirdPartyForm).then(
            () => {
              loading.close()
              this.$store.commit("SET_TOP_MENU_INDEX", 0)
              this.$router.push({path: this.tagWel.value});
            }).catch(() => {
            loading.close()
          })
        },
        immediate: true
      }
    },
    created() {
      this.active = getStore({name: "tenantId"});
      this.getTime();
      setInterval(() => {
        this.getTime();
      }, 1000);
    },
    mounted() {
    },
    computed: {
      ...mapGetters(["website", 'tagWel'])
    },
    props: [],
    methods: {
      getTime() {
        this.time = dateFormat(new Date());
      }
    }
  };
</script>
